<template>
  <div class="container pb-4" v-for="item in menuList" :key="item.value">
    <span class="text-xs">
      {{ item.label }}
    </span>
    <div
      class="menu-item"
      :class="{ active: currentValue === sub.value }"
      v-for="sub in item.children"
      :key="sub.value"
      @click="changeRoute(sub)"
    >
      <IconPark :icon="sub.icon" size="18" />
      <span class="ml-1 text-sm">{{ sub.label }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import IconPark from '../icon-park/IconPark.vue'
import { useMenuStore } from '@/stores/menu'
const { menuList, currentValue, changeRoute } = toRefs(useMenuStore())
</script>

<style lang="less" scoped>
.container {
  color: #334155;
}
.menu-item {
  @apply flex items-center rounded cursor-pointer transition-colors hover:bg-slate-200 pt-1.5 pb-1.5 pl-4 pr-4 mb-1;
}
.active {
  @apply bg-gradient-to-r from-teal-400 to-emerald-400 text-slate-50 cursor-default;
}
</style>
